<template>
  <!--查看学生信息-->
    <div class="components_edit_modal components_edit3_modal">

        <el-dialog width="1000px" title="添加学生信息"  :visible.sync="state" :show-close="true" :close-on-click-modal="false" class="maxheight">
          <el-form :model="studentInfo" :rules="rules" ref="studentInfo" class="demo-studentInfo clearfix">
              <el-form-item label="学号" prop="studentNumber">
                <el-input clearable type="number" v-model.trim.number="studentInfo.studentNumber" placeholder="请输入学号"></el-input>
              </el-form-item>
              <el-form-item label="学生姓名" prop="name">
                <el-input clearable v-model.trim="studentInfo.name" placeholder="请输入学生姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex" >
                <el-select clearable filterable v-model="studentInfo.sex" placeholder="请选择性别">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                  <el-option label="保密" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="院校" prop="schoolId" >
                <el-select clearable filterable v-model="studentInfo.schoolId" placeholder="请选择院校" @change="changeSchool">
                  <el-option v-for="school in schoolList" :label="school.text" :value="school.id" :key="school.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="院系" prop="secondSchoolId" >
                <el-select clearable filterable v-model="studentInfo.secondSchoolId" placeholder="请选择院系" @change="changeSecondSchool">
                  <el-option v-for="secondSchool in secondSchoolList" :label="secondSchool.text" :value="secondSchool.id" :key="secondSchool.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="专业" prop="professionId" >
                <el-select clearable filterable v-model="studentInfo.professionId" placeholder="请选择专业" @change="changeProfession">
                  <el-option v-for="profession in professionList" :label="profession.text" :value="profession.id" :key="profession.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="班级" prop="classId" >
                <el-select clearable filterable v-model="studentInfo.classId" placeholder="请选择班级">
                  <el-option v-for="schoolClass in classList" :label="schoolClass.text" :value="schoolClass.id" :key="schoolClass.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文理科" prop="professionType" >
                <el-select clearable filterable v-model="studentInfo.professionType" placeholder="请选择文理科">
                  <el-option label="文科" value="0"></el-option>
                  <el-option label="理科" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday" require>
                <el-date-picker type="date" placeholder="请选择日期" v-model="studentInfo.birthday" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="民族" prop="nation" >
                <el-select clearable filterable v-model="studentInfo.nation" placeholder="请选择民族">
                  <el-option v-for="nation in nations" :label="nation.label" :value="nation.value" :key="nation.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="政治面貌" prop="politicsStatus" >
                <el-select clearable filterable v-model="studentInfo.politicsStatus" placeholder="请选择政治面貌">
                  <el-option v-for="political in politicalStatus" :label="political.label" :value="political.value" :key="political.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard" >
                <el-input clearable  v-model="studentInfo.idCard" placeholder="请输入身份证号"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone" >
                <el-input clearable type="tel" v-model.trim="studentInfo.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="电子邮件" prop="email" >
                <el-input clearable v-model.trim="studentInfo.email" placeholder="请输入电子邮件"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="status" >
                <el-select clearable filterable v-model="studentInfo.status" placeholder="状态">
                  <el-option v-for="status in statusList" :label="status.label" :value="status.value" :key="status.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="籍贯" prop="nativePlace" class="lineblock textareaBox">
                <el-input clearable type="input" v-model="studentInfo.nativePlace" placeholder="请输入籍贯"></el-input>
              </el-form-item>
              <el-form-item label="高考分数" prop="examScore" >
                <el-input clearable type="number" v-model.number="studentInfo.examScore" placeholder="请输入高考分数"></el-input>
              </el-form-item>
              <el-form-item label="高中学校" prop="seniorHighSchool" >
                <el-input clearable v-model="studentInfo.seniorHighSchool" placeholder="请输入高中学校"></el-input>
              </el-form-item>
              <el-form-item label="" prop="" style="height:40px;">
              </el-form-item>
              <el-form-item label="家长姓名" prop="parentsName" >
                <el-input clearable v-model.trim="studentInfo.parentsName" placeholder="请输入家长姓名"></el-input>
              </el-form-item>
              <el-form-item label="家长电话" prop="parentsPhone" >
                <el-input clearable type="tel" v-model.trim="studentInfo.parentsPhone" placeholder="请输入家长电话"></el-input>
              </el-form-item>
            <el-form-item label="家庭地址" prop="homeAddress" class="lineblock textareaBox">
              <el-input clearable type="textarea" v-model="studentInfo.homeAddress" placeholder="请输入家庭地址"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" class="lineblock textareaBox">
              <el-input clearable type="textarea" v-model="studentInfo.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="addStudent('studentInfo')">确 定</el-button>
                <el-button @click="state = false"  size="mini">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 内容区域  结束 -->
        </div>
</template>
<script>
  import ElCol from "element-ui/packages/col/src/col";
  import moment from 'moment'
  export default {
    components: {ElCol},
    data() {
      //数字
      var checkNumber = (rule, value, callback) => {
        console.log(value);
      if (!value) {
        return callback(new Error("内容不能为空,请输入数字"));
      }
      setTimeout(() => {
      if (!Number.isInteger(value)) {
        return callback(new Error("请输入数字"));
      }else if (value.length >= 50) {
        return callback(new Error("长度在 0 到 50 个字符"));
      } else{
        return callback();
      }
    },100);
    };
    //数字
      var checkedNumber = (rule, value, callback) => {
      if (!value) {
        return callback();
      }
      if (!Number.isInteger(value)) {
        return callback(new Error("请输入数字"));
      }else if (value.length >= 50) {
        return callback(new Error("长度在 0 到 50 个字符"));
      } else{
        return callback();
      }
    };
      //手机号
      var checkMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!/^[0-9_]{1,}$/.test(value)) {
        return callback(new Error("请输入数字"));
      } else if (value.length != 11) {
        return callback(new Error("请输入11位手机号"));
      }else{
        return callback();
      }
    };
    // 身份证
    var checkIdCard = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      } else if (!/^[A-Za-z0-9]+$/.test(value)) {
        return callback(new Error("请输入字母或数字"));
      } else if (value.length != 18) {
        return callback(new Error("请输入18位身份证号"));
      }else{
        return callback();
      }
    };
      return {
        state:false,
        studentInfo:{
          studentNumber:null,
          name:null,
          idCard:null,
          sex:null,
          birthday:null,
          professionType:null,
          schoolId:null,
          secondSchoolId:null,
          professionId: null,
          classId:null,
          politicsStatus: null,
          parentsName: null,
          status:'1',
          examScore:null,
          phone:null,
          seniorHighSchool: null,
          nation:null,
          parentsPhone:null,
          email: null,
          homeAddress: null,
          nativePlace: null,
          remark: null
        },
        rules: {
          studentNumber: [
            {required: true, validator: checkNumber,trigger: "blur" }
          ],
          name: [
            { required: true, message: '请输入学生姓名', trigger: 'blur' },
            { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
          ],
          idCard: [
            { required: true, message: "请输入身份证号", trigger: "blur" },
            { validator: checkIdCard, trigger: "blur" }
          ],
          sex: [
            {required: true, message: '请选择性别', trigger: 'change' }
          ],
          birthday:[
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          professionType: [
            { required: true, message: '请选择文理科', trigger: 'change' }
          ],
          schoolId: [
            { required: true, message: '请选择院校', trigger: 'change',type: 'number'}
          ],
          secondSchoolId: [
            { required: true, message: '请选择院系', trigger: 'change',type: 'number'}
          ],
          professionId: [
            { required: true, message: '请选择专业', trigger: 'change',type: 'number'}
          ],
          classId: [
            { required: true, message: '请选择班级', trigger: 'change',type: 'number'}
          ],
          politicsStatus: [
            { required: true, message: '请选择政治面貌', trigger: 'change' }
          ],
          parentsName: [
            { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
          ],
          examScore: [
            { required: true,validator: checkNumber, trigger: "blur" }
          ],
          phone: [
            { required: true, message: '请填写手机号', trigger: 'blur' },
            { validator: checkMobile, trigger: "blur" }
          ],
          seniorHighSchool: [
            { required: true, message: '请填写高中学校', trigger: 'blur' },
            { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
          ],
          nation: [
            { required: true, message: '请选择民族', trigger: 'change' }
          ],
          email: [
            { required: true, message: '请填写邮箱地址', trigger: 'blur' },
            { type: "email", message: "请输入正确的邮箱地址", trigger: "blur,change" }
          ],
          status: [
            { required: true, message: '请选择当前状态', trigger: 'blur' }
          ],
          homeAddress: [
            { min: 0, max: 100, message: '长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          nativePlace: [
            { required: true, message: '请填写籍贯', trigger: 'blur' },
            { min: 0, max: 100, message: '长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          remark: [
            { min: 0, max: 1000, message: '长度在 0 到 1000 个字符', trigger: 'blur' }
          ]
        },
        schoolList:[],
        secondSchoolList:[],
        professionList:[],
        classList:[],
        politicalStatus:[],
        nations:[],
        statusList:[]
      };
    },
    created(){
    },
    methods: {
      showDialog(id){
        let self = this;
        if(this.$refs['studentInfo']!==undefined){
            this.$refs['studentInfo'].resetFields();
         }
        self.state = true;
            self.getSchoolList();
        //获取政治面貌
        self.getDictsQueryByType("politics_status",
          (result)=>{
            self.politicalStatus = result;
          });
        //获取民族
        self.getDictsQueryByType("ethnic_group",
          (result)=>{
            self.nations = result;
          });
        //获取学籍状态
        self.getDictsQueryByType("student_school_census_status",
          (result)=>{
            self.statusList = result;
        });
      },
      getStudentInfo(id,success){
        let self = this;
        self.axios(api.getStudentInfo+id)
          .then(function(response){
                success(response.data.data)
          });
      },
      addStudent(studentInfo){
        let self = this;
        self.$refs[studentInfo].validate((valid) => {
          if (valid) {
            self.axios({
              method: 'post',
              url: api.saveStudentInfo,
              data: self.studentInfo
            }).then(function(response){
              if(response.data.success){
                self.$message({
                  message: '添加成功',
                  type: 'success'
                });
                self.state = false;
                self.$parent.$refs.studentSupportTable.$emit('vuetable:refresh');
              }else{
                self.$message.error(response.data.msg);
              }
            });
          } else {
            return false;
          }
        });
      },
      //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.studentInfo.secondSchoolId = null;
                this.studentInfo.professionId=null;
                this.studentInfo.classId=null;
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.studentInfo.schoolId;
                this.studentInfo.professionId=null;
                this.studentInfo.classId=null;
                this.professionList = [];
                this.classList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeProfession(professionId){
                let schoolId = this.studentInfo.schoolId;
                let secondSchoolId = this.studentInfo.secondSchool;
                this.studentInfo.classId=null;
                this.classList = [];
                this.getClassList(schoolId,secondSchoolId,professionId);
            },
            //获取筛选后的班级
            getClassList(schoolId,secondSchoolId,professionId){
                let vm = this;
                vm.axios.get(api.getClassList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId,
                        professionId:professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //查字典
            getDictsQueryByType(type,success){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl,{
                    params: {
                        type: type
                    }
                }).then((response) => {
                    if (response.data.success) {
                        success(response.data.data);
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                });
            },
    }
  }
</script>

<style scoped>
  .demo-ruleForm{
    width:1000px;
  }
  .student-body {
    min-height: 545px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
  }
  .student-body .contents span {
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    text-align: right;
  }
  .student-body .contents .spanInput {
    height: 26px;
    width: 206px;
    line-height: 26px;
    font-size: 12px;
    color: #cdcdcd;
    text-indent: 5px;
    border-radius: 15px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    outline: none;
  }

  .student-body .contents .sexSpan {
    width: 20px;
    padding-left: 20px;
  }
  .student-body .contents .sexSpans{
    width: 50px;
  }
  .student-body .contents .lableInput {
    position: absolute;
    top: 12px;
    left: 105px;
  }
  .student-body .contents
  .student-body .reti {
    width: 94px;
  }
  .student-body .inputs {
    width: 100%;
    height: 40px;
    padding-top: 20px;
  }
  .student-body .inputs > span {
    font-size: 12px;
    color: #333;
    padding-left: 1px;
  }

  .box_tit {
    border-bottom: 1px solid #e6e8ec;
    position: relative;
    padding: 4px 0 10px 30px;
    margin-top: 0;
    font-weight: bold;
    line-height: 16px;
  }
</style>
